<template>
  <el-dialog :visible.sync="showDialog" width="60%">
    <div>
      <div style="position: relative;display: box;display: -webkit-box;height: 40px;width: 100%;margin: 20px 0;">
        <div style="line-height: 40px;font-size: 20px;font-weight: solid;-webkit-box-flex: 1;box-flex: 1;">通过IP选择服务器</div>
        <el-button type="info" style="margin-right: 15px;" @click="showInside = true">手动添加</el-button>
      </div>
      <tool-inner-add :showInside="showInside" @serversChange="serversChange"></tool-inner-add>
      <el-select v-model="inputService" filterable clearable placeholder="主机名按Enter进行过滤..." style="margin: 5px 20px;width: 700px;">
        <el-option
          v-for="item in this.servers"
          :key="item.ip"
          :label="item.ip"
          :value="item.ip">
        </el-option>
      </el-select>
      <el-table
        ref="multipleTable"
        :data="servers"
        tooltip-effect="dark"
        style="width: 100%;height: 400px;text-align: center;"
        empty-text="没找到相应的数据!"
        @selection-change="handleSelectionChange">
        <el-table-column
          header-align="center"
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          header-align="center"
          prop="os"
          label="操作系统"
          width="150">
        </el-table-column>
        <el-table-column
          header-align="center"
          prop="ip"
          label="IP"
          width="150">
        </el-table-column>
        <el-table-column
          header-align="center"
          prop="status"
          label="状态"
          width="150">
          <template slot-scope="scope">
            <span v-if="scope.row.status === 1" style="color: green;">Running</span>
            <span v-else style="color: red;">Stop</span>
          </template>
        </el-table-column>
        <el-table-column
          header-align="center"
          prop="host_name"
          label="主机名"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          header-align="center"
          label="操作">
          <template slot-scope="scope">
            <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="showDialog = false">取 消</el-button>
      <el-button type="primary" @click="onChoose">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>

import { serverList, DeleteServer } from '../../api/configure'
import innerAdd from './inner.vue'

export default {
  name: 'tool-choose-service',
  components: {
    'tool-inner-add': innerAdd
  },
  props: {
    machines: {
      default: [],
      type: Array
    }
  },
  data() {
    return {
      showDialog: false,
      showInside: false,
      inputService: '',
      servers: [],
      multipleSelection: [],
      innerChanged: false
    }
  },
  watch: {
    machines: function(val) {
      if (val !== []) {
        this.servers = val
        this.showDialog = true
      }
    },
    servers: function(val) {
      if (val !== []) {
        this.showDialog = true
      }
    },
    innerChanged: function(val) {
      if (val) {
        serverList().then(res => {
          if (res.code === 200) {
            this.servers = res.data
          }
        }).catch(err => {
          console.log(err)
          this.servers = []
          this.$notify({
            title: '失败',
            message: '获取失败',
            type: 'warning',
            duration: 2000
          })
        })
      }
    }
  },
  methods: {
    querySearch(queryString, cb) {
      var machines = this.servers
      var results = queryString ? machines.filter(this.createFilter(queryString)) : machines
      cb(results)
    },
    createFilter(queryString) {
      return (res) => {
        return (res.ip.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    onChoose() {
      this.showDialog = false
      this.$emit('choosed', this.multipleSelection)
    },
    serversChange(val) {
      this.innerChanged = val
      this.showInside = false
    },
    handleDelete(index, row) {
      var params = {}
      params.id = row.id
      DeleteServer(params).then(res => {
        if (res.code === 200) {
          for (let i = 0; i < this.servers.length; i++) {
            if (this.servers[i].id === row.id) {
              this.servers.splice(i, 1)
            }
          }
        }
      }).catch(err => {
        console.log(err)
        this.$notify({
          title: '失败',
          message: '获取失败',
          type: 'warning',
          duration: 2000
        })
      })
    }
  }
}
</script>

